<template>
	<view class="content">
		<view class="boxOne">
			<view class="search">
				<li>
					<img src="../../static/big.png" style="width: 40rpx;height: 40rpx;margin: 16rpx 0 0 20rpx;">
				</li>
				<li>
					<span>搜索加油站</span>
				</li>
				<li>
					<span>搜索</span>
				</li>
			</view><!-- search结尾 -->
			<view class="select">
				<view class="selectOne">
					<span>精选</span>
				</view>
				<view class="screening">
					<span>92#/筛选</span>
				</view>
				<view class="sort">
					<span>智能排序</span>
				</view>
			</view><!-- select结尾 -->
			<view class="three">
				<view>团油优选</view>
				<view>加油返券</view>
				<view>免费洗车</view>
			</view>
		</view><!-- boxOne结尾 -->
		<view class="boxTwo">
			<view class="recommended">
				<p class="today">今日推荐</p>
				<view class="siteBox">
					<p class="name">鑫泰运石油</p>
					<p class="address">三里庄路3号</p>
					<p></p>
				</view>
			</view>
		</view><!-- boxTwo结尾 -->
	</view><!-- content结尾 -->
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.boxOne {
		border: 1px white solid;
		width: 99.5%;
		height: 300rpx;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: white;
		box-shadow: 0px 0px 5px #999;
		position: fixed;
		top: 0;
	}

	.search {
		border: 1px #F6F6F6 solid;
		width: 450rpx;
		height: 70rpx;
		border-radius: 50px;
		margin: 50rpx 0 0 30rpx;
		background-color: #F6F6F6;
		display: flex;
		justify-content: left;
	}

	.search li:nth-child(2) {
		border-left: 1px #F0F0F0 solid;
		width: 230rpx;
		height: 50rpx;
		line-height: 55rpx;
		margin: 8rpx 0 0 25rpx;
		padding-left: 25rpx;
		font-size: 30rpx;
		color: #C1C1C1;
	}

	.search li:nth-child(3) {
		border: 1px red solid;
		width: 100rpx;
		height: 55rpx;
		background-color: #FF251C;
		text-align: center;
		line-height: 55rpx;
		display: block;
		font-size: 25rpx;
		border-radius: 50rpx;
		color: white;
		margin: 7rpx 0 0 0;
	}

	.select {
		margin: 35rpx 15rpx 0 30rpx;
		height: 70rpx;
		display: flex;
		justify-content: left;
	}

	.selectOne {
		width: 300rpx;
		line-height: 60rpx;
	}

	.selectOne span {
		font-size: 40rpx;
		font-weight: bold;
	}

	.screening {
		margin-left: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #788196;
	}

	.sort {
		margin-left: 60rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		color: #788196;
	}

	.three {
		display: flex;
		justify-content: left;
		margin: 15rpx 15rpx 0 30rpx;
	}

	.three view {
		width: 160rpx;
		height: 45rpx;
		line-height: 40rpx;
		text-align: center;
		margin-left: 15rpx;
		border-radius: 50rpx;
		background-color: #e3e4e5;
		font-size: 25rpx
	}

	.three view:first-child {
		margin-left: 0;
	}

	.boxTwo {
		border: 1px red solid;
		margin: 310rpx 0 0 0;
	}

	.recommended {
		border: 1px red solid;
		width: 90%;
		height: 350rpx;
		margin: 0 auto;
		border-radius: 10px;
		background: linear-gradient(to right, #FF6D79, #FFA480);
	}

	.today {
		font-size: 32rpx;
		margin: 10rpx 0 0 15rpx;
		color: white;
	}

	.siteBox {
		border: 1px white solid;
		width: 96%;
		height: 270rpx;
		margin: 15rpx auto;
		border-radius: 10rpx;
		background-color: white;
	}

	.name {
		font-size: 38rpx;
		font-weight: bold;
		margin: 15rpx 0 0 15rpx;
		line-height: 40rpx;
	}

	.address {
		font-size: 25rpx;
		margin: 15rpx 0 0 15rpx;
	}
</style>
